css基础

头像
xmaksjdhw
    阅读 4 分钟

    引入

    <head>
    <link rel="stylesheet" href="base.css">
    <style>
        body{
            margin: 0;
        }
    </style>
</head>

    浏览器私有属性

    • chrome, safari

      • -webkit-

    • firefox

      • -moz-

    • IE

      • -ms-

    • opera

      • -o-

    @规则语法

    • @标识符 xxx;
    • @标识符 xxx {}

    • 常用

      • @media
      • @keyframes
      • @font-face

    选择器

    1. 简单选择器

      • 标签选择器
      p{color: red;}
      • 类选择器
      .className{color: red;}
      • id选择器
      .idName{color: red;}
      • 通配符选择器
      *{color: red;}
      • 属性选择器
      /*选中属性*/
[att]{color: red;}
[disabled]{color: red;}
/*属性att=val*/
[att=val]{color: red;}
[type=button]{color: red;}
/*包含属性att=val*/
[att~=val]{color: red;}
/*选中属性值等于val或val-开头的*/
[att|=val]{color: red;}
/*选中属性值以val开头的*/
[att^=val]{color: red;}
/*选中属性值以val结尾的*/
[att$=val]{color: red;}
/*选中属性值包含val的*/
[att*=val]{color: red;}
      • 伪类选择器
      a:link{color: gray;}
a:visited{color: red;}
/*以上两个只用于链接*/
a:hover{color: green;}
a:active{color: orange;}
      • :enabled
      • :disabled
      • :checked 单选框 复选框
      • :first-child
      • :last-child
      • :nth-child(even) 选中偶数项
      • :nth-child(3n+1) 选中第1，4，7...项
      • :nth-last-child(3n+1) 选中第1，4，7...项
      • ：only-child 选中只有一个子元素的项
      • :first-of-type
      • :last-of-type 其余同上
      dd:first-of-type{color: red;}
dt:first-of-type{color: red;}
      • :only-of-type
      span:only-of-type{color: red;}
      • 不常用的伪类
      • :empty
      • :root
      • :not()
      • :target
      • :lang()
    2. 伪元素选择器
    • ::first-letter 选中第一个字母
    • ::firt-line 选中第一行
    • ::before{content: "before"} 在某个元素之前插入content的内容
    • ::after{content: "after"}
    • ::selection 选中被选中的元素

    1. 组合选择器

      • 后代选择器
      .className p{color: red;}
      • 子选择器
      .className>p{color: red;}
      • 兄弟选择器
      /*选择h2之后的紧跟着p标签*/
.h2+p{color: red;}
/*选择h2之后的p标签*/
.h2~p{color: red;}

    2. 选择器分组

      h1,h2,h3{color: red;}

    css优先级

    1. 行内样式
    2. ID选择器
    3. 类 伪类和属性选择器
    4. 标签选择器和伪元素选择器

    css优先级改变

    1. 改变先后顺序

      • 优先级相同，后面的会覆盖前面的

    2. 提升优先级选择器

      • 在选择器前面加上标签选择器
    3. !important

    字体

    • font-size

      • px
      • em 基于父元素的倍数
      • 百分比
    • font-family

    • font-weight

      • normal | bold | bolder | lighter
      • 大多数字体只支持normal bold

    • font-style

      • normal
      • italic 斜体
      • oblique 倾斜（强制倾斜）

    • line-height

      • normal
      • px em

    对齐方式

    • text-alogn

      • left
      • right
      • center
      • justify 两端对齐

    • vertical-align

      • baseline
      • sub 下标
      • super
      • top
      • text-top
      • middle
      • bottom
      • text-bottom
      • 百分比
      • px

    • text-indent 缩进

      • px em 百分比
      • 2em缩进2个字

    格式处理

    • white-space 是否保留换行， 是否合并空格

      • normal 合并 会自动换行
      • nowrap 不换行
      • pre 保留换行 空格 tab
      • pre-wrap 在pre的基础上自动换行（常用）
      • pre-line 只保留还行

    • word-wrap

      • normal
      • break-word 长单词自动换行

    • word-break

      • normal
      • keep-all
      • break-all

    文本修饰

    • text-shadow
        /*x偏移，y偏移，模糊半径*/
    text-shadow: x, y, radio, #f00;

    • text-decoration

      • underline 下
      • overline 上
      • line-through 中

    高级设置

    • text-overflow

      • clip
      • ellipsis
      /*一行显示文本，超出显示...*/
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

    • cursor 鼠标形状

      • url
      • auto
      • default
      • none
      • help
      • pointer 手型
      • zoom-in 放大镜
      • zoom-out
      • move

    • 强制继承

      • inherit

    盒模型

    • 边距 边框 填充 内容
    • margin border padding content
    • width <length>| 百分比 | auto | inherit
    • height

    • 水平居中

      margin: 0 auto;

    • border

      • border-width
      • border-style solid | dashed | dotted
      • border-color

    • border-radius 圆角

      • x 方向半径4个值 / y方向半径4个值
      /*圆形*/
border-radius: 50%;

    • overflow

      • visible 默认
      • hidden 隐藏
      • scroll 滚动
      • auto 超出自动显示滚动条

    • box-sizing

      • content-box | border-box

    • box-shadow

      /*水平偏移 垂直偏移 模糊半径 阴影大小 颜色*/
box-shadow: 4px 6px 3px 2px red;
/*内阴影 水平偏移 垂直偏移 模糊半径 颜色*/
box-shadow: inset 4px 6px 3px red;

    • outline 轮廓， 不占空间

      • outline-width
      • outline-style solid | dashed | dotted
      • outline-color invert 和当前颜色相反

    背景

    • background-color

      • #fff
      • rgb()
      • rgba()
      • transparent 全透明
      • 始终在最底层

    • background-image

      • url()
      • 多张图片， 先写的在上层

    • background-repeat

      • repeat-x | repeat-y | repeat | space | round(缩放铺满) | no-repeat

    • background-attachment

      • scroll
      • local 背景随内容移动
      • fixed

    • background-position

      • left right center top bottom
      background-position: 10px 20px;
background-position: right 10px top 20px;
background-position: 20% 50%;
/*居中*/
background-position: center center;
background-position: 50% 50%;
      • 应用 图标精灵

    • linear-gradient() 线性渐变

      /*从上到下*/
background-image： linear-gradient(red, blue);
/*从下到上*/
background-image： linear-gradient(to top, red, blue);
background-image： linear-gradient(to right bottom, red, blue);
/*从下往上 0度*/
background-image： linear-gradient(0deg, red, blue);
/*三种颜色*/
background-image： linear-gradient(green, red, blue);

    • radial-gradient 径向渐变

      background-image： radial-gradient(closest-side, red, blue);
background-image： radial-gradient(farthest-side, red, blue);
background-image： radial-gradient(closest-corner, red, blue);
/*默认大小 最远距离*/
background-image： radial-gradient(farthest-corner, red, blue);
background-image： radial-gradient(circle 100px, red, blue);
    • repeating--gradient 重复 为linear radial

    • background-origin 位置相对点

      • padding-box
      • border-box
      • content-box

    • background-clip 裁剪

      • padding-box
      • border-box 默认
      • content-box

    • background-size

      • px 百分比
      • auto
      • cover 撑满整个容器
      • contain 撑满整个容器 但宽高不能超出
    css
    xmaksjdhw
    91 声望11 粉丝

    引用和评论

    推荐阅读
    头像
    网页设计的垂直居中

    寒青赞 41阅读 5.2k评论 3

    头像
    CSS团队协作规范

    寒青赞 38阅读 7.4k

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    CSS 如何模拟“真实的”进度条？

    XboxYan赞 8阅读 1.6k评论 2

    头像
    纯CSS实现有趣emoji切换开关

    南城FE阅读 4k

    头像
    那些年我用过的SAP IDE

    注销阅读 3k

    头像
    SAP UI5 初学者教程之十三 - 如何添加自定义 CSS 类试读版

    注销阅读 1.4k

    0 条评论
    得票最新